import React, { useEffect } from 'react';
import { connect } from "react-redux";
import { renderRoutes } from 'react-router-config';
import { NavLink } from 'react-router-dom';
import { forceCheck } from "react-lazyload";
import { Top, Tab, TabItem, Content } from './style';
import Slider from '../../components/slider/slider';
import Scroll from '../../components/scroll/scroll';
import Loading from "../../baseUI/loading/loading";
import { getBannerList } from "./store/actionCreators";

interface Props extends csc.Props {
  enterLoading?: boolean;
  bannerList?: any;
  getBannerListDataDispatch: Function;
}

function Home(props: Props) {
  const { route, enterLoading, bannerList } = props;

  const { getBannerListDataDispatch } = props;

  useEffect(() => {
    if (!bannerList.size) {
      getBannerListDataDispatch();
    }
  }, []);

  // mock 数据
  const bannerListJS = bannerList ? bannerList.toJS() : [];

  return (
    <div>
      <Top>
        <span className="iconfont iconliebiao" ></span>
        <span className="search" >澄三彩</span>
        <span className="iconfont iconsousuo" ></span>
      </Top>
      <Content>

        { enterLoading ? <Loading></Loading> : null }

        <Scroll onScroll={forceCheck} >
          <div>
            <Slider bannerList={bannerListJS} ></Slider>
            <Tab>
              <NavLink to="/recommend" activeClassName="selected" ><TabItem><span> 推荐 </span></TabItem></NavLink>
              <NavLink to="/singers" activeClassName="selected" ><TabItem><span> 歌手 </span></TabItem></NavLink>
              <NavLink to="/rank" activeClassName="selected" ><TabItem><span> 排行榜 </span></TabItem></NavLink>
            </Tab>
            {renderRoutes(route?.routes)}
          </div>
        </Scroll>
      </Content>
    </div>
  );
}

const mapStateToProps = (state: any) => ({
  enterLoading: state.getIn(['home', 'enterLoading']),
  bannerList: state.getIn(['home', 'bannerList'])
});

// 映射 dispatch 到 props 上
const mapDispatchToProps = (dispatch: any) => {
  return {
    getBannerListDataDispatch() {
      dispatch(getBannerList());
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Home));
